<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>商品信息</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-form label-width="100px">
          <el-collapse-item title="表单设置" name="1">
            <el-form-item label="表单选择">
              <div class="select_div" v-if="data.id && data.title">
                <i class="el-sc-moban"></i>
                <span>{{ data.title }}</span>
                <span @click="selectfrom" class="btns">修改</span>
              </div>
              <div v-else class="select_div" @click="selectfrom">
                <i class="el-sc-moban"></i>
                <span class="conetnt">请选择</span>
              </div>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="内容样式" name="2">
            <el-form-item label="按钮文字">
              <el-input style="width: 240px;" v-model="data.input_value"></el-input>
            </el-form-item>
            <el-form-item label="按钮颜色">
             <ColorPicker :color='data' :name='"input_color"'></ColorPicker>
            </el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_t"></el-slider>
                <el-input-number v-model="data.p_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_b"></el-slider>
                <el-input-number v-model="data.p_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_lr"></el-slider>
                <el-input-number v-model="data.p_lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_t"></el-slider>
                <el-input-number v-model="data.r_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_b"></el-slider>
                <el-input-number v-model="data.r_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>


          </el-collapse-item>
        </el-form>
      </el-collapse>
    </div>
    <el-dialog :visible.sync="showSelectFr" width="50%" append-to-body><Selectfrom :key="rk" :data="selectFr" @closepup="closepup" @outData="closePro"></Selectfrom></el-dialog>
  </el-card>
</template>

<script>
import Selectfrom from '@/components/Selectfrom/index';
import ColorPicker from '@/components/ColorPicker/index'
import {getform} from '@/api/mall/customform';

export default {
  data() {
    return {
      selectFr: {id: '', title: ''},
      activeNames: ['1', '2', '3'],
      showSelectFr: false,
      rk: 0
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    Selectfrom,
    ColorPicker
  },
  methods: {
    selectfrom() {
      this.showSelectFr = true;
      this.rk++;
    },
    closePro(e) {
      this.selectFr = e;
      // this.data.list=e.config;
      this.data.title = e.title;
      this.data.id = e.id;
      this.getdetail(e.id)
      this.showSelectFr = false;
    },
    getdetail(id) {
      getform(id).then(res => {
        this.data.list = res.msg.config;
      });
    },
    closepup() {
      this.showSelectFr = false;
    }
  }
};
</script>

<style lang="scss">
.select_div {
  width: 240px;
  height: 36px;
  display: flex;
  align-items: center;
  border: 1px solid #e6ebf5;
  cursor: pointer;
  position: relative;
  i {
    margin: 0 10px;
  }
  .conetnt {
    color: #2d8cf0;
  }
  .btns {
    position: absolute;
    right: 0;
    color: #2d8cf0;
    padding: 0 20px;
    border-left: 1px solid #e6ebf5;
  }
}
</style>
